import React, { FC } from 'react'
import { Avatar } from '../../../components'
import { Wrap, IconRemove } from './style'
import { TerModel } from '../translator'
import { useSelectStore } from '../store'
interface ItemProps {
	item: TerModel
	index: number
	from: string
}
export const ListItem: FC<ItemProps> = (props) => {
	const mcc = props.item.mcc
	const checked = props.item.status.checked
	const number = props.item.number
	const mtKey = props.item.mtKey
	const indexWidth = `${number ?? '00'}`.length * 8
	const { removeDesMt, removeSrcMt, toggleClick } = useSelectStore((state) => ({
		removeDesMt: state.removeDesMt,
		removeSrcMt: state.removeSrcMt,
		toggleClick: state.toggleClick,
	}))
	const handleCheckItem = (e: React.MouseEvent) => {
		e.stopPropagation()
		if (props.from === 'select-list-des') {
			toggleClick(mtKey)
		}
	}
	const handleRemove = (e: React.MouseEvent) => {
		e.stopPropagation()
		if (props.from === 'select-list-des') {
			removeDesMt(mtKey)
		} else {
			removeSrcMt(mtKey)
		}
	}
	return (
		<Wrap checked={checked} indexWidth={indexWidth} title={mcc.name} onClick={handleCheckItem}>
			<div className="item-index">{number}</div>
			<div className="avatar">
				<Avatar value={mcc} />
			</div>
			<div className="name">
				<div className={`poll_item_name`}>{mcc.name}</div>
			</div>
			<IconRemove className="remove" onClick={handleRemove} />
		</Wrap>
	)
}
